<!--
 * @Description:
 * @version: 签约申请审核
 * @Author: 潘骏杰
 * @Date: 2021-11-19 09:03:57
 * @LastEditors: 潘骏杰
 * @LastEditTime: 2022-03-29 13:36:26
-->
<template>
  <div>
    <HeaderNav />

    <div class="back-white">
      <div class="mrbody" style="padding: 10px 0">
        <div class="cardbody">
          <van-row gutter="10">
            <van-col span="12">
              <div class="cont tab-ul">
                <div class="title">签约对象信息</div>
                <div class="li-back">
                  <h3>
                    王立军
                    <div class="age">58岁</div>
                    <div class="sex">男</div>
                    <span>139****4920</span>
                  </h3>
                  <p class="van-ellipsis">
                    无锡市新吴区新安街道新安花苑281#201
                  </p>
                </div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="cont tab-ul">
                <div class="title">签约团队信息</div>
                <div class="li-back">
                  <div class="li-left">
                    <img src="@/assets/images/icon/girl.png" class="act">
                  </div>
                  <div class="li-right">
                    <h3 class="van-ellipsis">
                      新安高建伟团队<span>&nbsp;</span>
                    </h3>
                    <p class="van-ellipsis">新吴区新安街道卫生服务中心</p>
                  </div>
                </div>
              </div>
            </van-col>
          </van-row>
          <!-- 循环 -->
          <div class="blockpack re" @click="chosePack()">
            <div class="leftLine" />
            <div class="packTitle">基础医疗服务包</div>
            <div class="packTime">2021年1月1日 至 2021年12月</div>
            <div class="packNum">*1</div>
          </div>
          <div class="blockpack re" @click="chosePack()">
            <div class="leftLine" />
            <div class="packTitle">医疗服务个性化包</div>
            <div class="packTime">2021年1月1日 至 2021年12月</div>
            <div class="packNum">*2</div>
          </div>
          <div class="dll">
            <van-row>
              <van-col span="4">服务协议</van-col>
              <van-col span="20">
                <div class="blue" style="margin-top: 0" @click="showD()">
                  《家庭医生签约服务协议》，《离休干部签约协议》
                </div></van-col>
            </van-row>
          </div>
        </div>
      </div>
      <van-col span="24">
        <div class="cardbody" style="margin: 10px">
          <div class="title">签约服务状态</div>
          <div class="foot">
            <h2>
              签约服务履约进度:
              <i>2/8</i>
            </h2>
            <van-button
              round
              plain
              type="info"
              @click="gopush('/PerformanceDetails')"
            >
              查看详情
            </van-button>
          </div>
        </div>
        <NoData v-if="false" />
      </van-col>
      <NoData v-if="false" />
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import HeaderNav from '@/components/headerNav/index'

export default {
  name: 'ReviewOfSigningApplication',
  // import引入的组件需要注入到对象中才能使用
  components: {
    HeaderNav
  },
  data() {
    // 这里存放数据
    return {
      loading: false,
      active: 0,
      showCardNumber: false,
      submiting: false,
      argeeBol: false,
      refuseshow: false,
      message: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 加载布尔值成功 初始化数据接口判断在这
    await this.getData()
    this.today = new Date()
    this.loading = false
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // window.sessionStorage.clear();
    // console.log(this.$route.query.title);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周.期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    chosePack() {
      // 选择服务包
      this.$router.push({ path: '/chosepackage' })
    },
    getData() {
      // 拉取数据接口
    },
    showD() {
      // 协议跳转
      console.log('---')
      this.$router.push({ path: '/agreement', query: { price: 198 }})
    },
    gopush(path) {
      this.$router.push({ path })
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
/deep/ .van-hairline--bottom::after {
  display: none !important;
}
/deep/ .van-submit-bar__price {
  color: #4a4a4a !important;
}
/deep/ .van-button {
  height: 30px;
  border: 2px solid #4a90e2;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #4a90e2;
}
.tab-ul {
  padding: 0;
}
.act {
  margin: 8px 0 0 0;
}

.title {
  font-size: 15px;
  margin-bottom: 5px;
  color: #9b9b9b;
}

.li-back h3 {
  display: flex;
  margin: 5px 0;
  padding: 0;
}
.li-back h3 {
  .age {
    width: 70px;
    height: 22px;
    background: #4a90e2;
    border-radius: 27px;
    text-align: center;
    line-height: 22px;
    margin-left: 5px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    flex: 1;
  }
  .sex {
    width: 40px;
    height: 22px;
    background: #4a90e2;
    border-radius: 27px;
    text-align: center;
    line-height: 22px;
    margin-left: 4px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    flex: 1;
  }
}
.li-back h3 span {
  flex: 1;
}
.li-back h3 span,
.li-back p {
  font-weight: 400;
  color: #d2d2d2;
  line-height: 23px;
  font-size: 16px;
  color: #9b9b9b;
  padding: 0;
}
.li-right {
  margin-left: 60px;
  h3 {
    line-height: 23px;
  }
}
.cardbody {
  padding: 10px;
  width: calc(100% - 30px);
}
.blockpack {
  clear: both;
  font-size: 18px;
  margin-bottom: 20px;
}
.leftLine {
  width: 8px;
  height: 60px;
  float: left;
  background: #4a90e2;
  border-radius: 5px;
  margin-right: 8px;
}
.packTitle {
  margin-top: 5px;
}
.packTime {
  margin-top: 10px;
  color: #9b9b9b;
}
.packNum {
  position: absolute;
  right: 20px;
  top: 20px;
}
.dll {
  font-size: 18px;
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  h2 {
    font-size: 18px;
    margin-right: 20px;
  }
  i {
    font-size: 20px;
    color: #4a90e2;
    margin-left: 20px;
    font-style: normal;
  }
}
</style>
